/*
* @Author: Zhou Junyu
* @Date: 2023-06-10 17:00:20
* @LastEditors: Yejing
* @LastEditTime: 2023-06-12 10:21:36
* @Description: 店铺入住
*/
<template>
	<view class="container">
		<c-layout>
			<!-- 头部 -->
			<c-navigation-bar slot="head" navbarBgColor="#5EA2FF" left-icon-color="#fff" @backEvent="goBack">
			</c-navigation-bar>

			<!-- 招商图 -->

			<view class="avatar">
				<view class="avatar-box">
					<image src="@/static/images/storeIntroduct/join.png" mode=""></image>
				</view>
			</view>

			<!-- 店铺详情 -->
			<view class="detail">
				<view class="fans" v-for="(item,index) in bgImages" :key="index">
					<image :src="item" mode=""></image>
				</view>

			</view>
			<!-- 官方优势 -->
			<view class="img-box advantage">
				<view class="">
					<image src="@/static/images/storeIntroduct/advantage.png" mode=""></image>
				</view>
			</view>
			<!-- 多渠道交付 -->
			<!-- 	<view class="img-box delivery">
				<view class="">
					<image src="@/static/images/storeIntroduct/delivery.png" mode=""></image>
				</view>
			</view>
		 -->
			<!-- gushi -->
			<view class="img-box story">
				<view class="storyTitle" >{{title}}</view>
				<swiper class="swiper" circular :autoplay="true" :indicator-dots="true" :interval="5000" :duration="1000"
					indicator-color='#F5F6F8' indicator-active-color='#2934D0'>
					<swiper-item v-for="(item,index) in contentList" :key="item.id" @click="showDetail(item)">
						<view class="contentBox">
							<view class=""  style="text-align: center;font-size: 16px;font-weight: bold;margin: 10px 0;">
								{{item.title}}
							</view>
							<u-parse :html="item.content"></u-parse>
						</view>

					</swiper-item>
				</swiper>

				<view class="">
				</view>
			</view>

			<!-- 按钮 -->
			<view class="btn-box" @click="toApplyOpenShop()">
				<button type="default">{{$t('storeManagement.EnterImmediately')}}</button>
			</view>

			<promptDialog ref="promptDialogs"></promptDialog>
		</c-layout>

		<u-popup v-model="storyshow" mode="center" width="80%"  border-radius="40">
			<scroll-view scroll-y="true" style="height: 85%;">
				<view class="popcontentBox">
					<view>
						<view class="" style="text-align: center;font-size: 16px;font-weight: bold;margin: 10px 0;">
							{{story.title}}
						</view>
						<u-parse :html="story.content"></u-parse>
					</view>
				</view>
				
			</scroll-view>
			
			<view class="bottom">
				<button type="default" @click="storyshow=false" style="height: 50px;">{{$t('liveBar.off')}}</button>
			</view>
		</u-popup>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgImages: [
					require('@/static/images/storeIntroduct/kaidian.png'),
					require('@/static/images/storeIntroduct/live.png'),
					require('@/static/images/storeIntroduct/dual.png'),
				],
				storeImgs: [{
					image: require('@/static/images/storeIntroduct/Rectangle.png')

				}, {
					image: require('@/static/images/storeIntroduct/Rectangle.png')

				}, {
					image: require('@/static/images/storeIntroduct/Rectangle.png')

				}],
				shopStatus: '',
				contentList: [],
				title: 'Inspirational story',
				story: {
					title: '',
					content: ''
				},
				storyshow: false,
			}
		},
		onReady() {
			this.$u.get('/app/shop').then(res => {
				this.shopStatus = res.data ? Number(res.data.status) : ''

				switch (this.shopStatus) {
					case (1):
						this.$refs.promptDialogs.show({
							confirm: (close) => {
								close()
								console.log(1112321)
							},

							icon: 'tip',
							btnColor: '#2934d0', //按钮颜色
							btnText: this.$t('storeManagement.gotIt'), // 按钮文字
							des: this.$t('storeManagement.ReviewTips'),
							title: this.$t('storeManagement.UnderReview'),
						})
						break;
					case (2):
						this.$refs.promptDialogs.show({
							confirm: (close) => {
								close()
							},
							icon: 'success',
							btnColor: '#2934d0', //按钮颜色
							btnText: this.$t('storeManagement.gotIt'), // 按钮文字
							des: this.$t('storeManagement.ApprovedTips'),
							title: this.$t('storeManagement.Approved'),
						})
						break;
					case (-1):
						this.$refs.promptDialogs.show({
							confirm: (close) => {
								close()
							},
							icon: 'err',
							btnColor: '#2934d0', //按钮颜色
							btnText: this.$t('storeManagement.gotIt'), // 按钮文字
							des: this.$t('storeManagement.UnapproveTips'),
							title: this.$t('storeManagement.Unapprove'),

						})
						break;
				}
			})
			this.$u.get('/app/platformNews/getInfo').then(res => {
				this.contentList = res.data
			})


		},
		methods: {

			goBack() {
				uni.switchTab({
					url: "/pages/user/user",
					animationType: 'slide-in-bottom	',
					animationDuration: 200
				})

			},
			commit() {
				console.log(11)
			},
			fansClick(index) {
				switch (index) {
					case (0):
						this.$refs.promptDialogs.show({

							confirm: (close) => {
								close()
								console.log(1112321)
							},
							icon: 'tip',
							btnColor: '#2934d0', //按钮颜色
							btnText: this.$t('storeManagement.gotIt'), // 按钮文字
							des: 'After a new store is opened, 0 fans can apply for a shopping cart ',
							title: '0 fans open shop',
						})
						break;
					case (1):
						this.$refs.promptDialogs.show({
							confirm: (close) => {
								close()
							},
							icon: 'tip',
							btnColor: '#2934d0', //按钮颜色
							btnText: this.$t('storeManagement.gotIt'), // 按钮文字
							des: 'Live video delivery tutorial,free to watch live delivery tutorial',
							title: 'Live Tutorial',
						})
						break;
					case (2):
						this.$refs.promptDialogs.show({
							confirm: (close) => {
								close()
							},
							icon: 'tip',
							btnColor: '#2934d0', //按钮颜色
							btnText: this.$t('storeManagement.gotIt'), // 按钮文字
							des: 'Short video+live broadcast two-way delivery',
							title: 'Dual path',
						})
						break;
				}
			},
			toApplyOpenShop() {
				switch (this.shopStatus) {
					case (1):
						uni.navigateTo({
							url: '/pages/storyType/personalPrevlew',
							"animationType": "slide-in-right",
							"animationDuration": 300
						})
						break;
					case (2):
						uni.navigateTo({
							url: '/pages/storyType/contractSignature',
							"animationType": "slide-in-right",
							"animationDuration": 300
						})
						break;
					case (0):
						uni.navigateTo({
							url: '/pages/storyType/storeManagement',

							"animationType": "slide-in-right",
							"animationDuration": 300
						})
						break;
					case (-1):
					default:
						uni.navigateTo({
							url: '/pages/applyOpenShop/applyOpenShop',
							"animationType": "slide-in-right",
							"animationDuration": 300
						})
						break;
				}
			},
			// 查看励志故事
			showDetail(item) {
				this.story = item
				this.storyshow = true
			},
		},

	}
</script>
<style lang="scss" scoped>
	.container {
		font-family: PingFang SC;
		height: 100%;
		background-color: #5ea2ff;

		.avatar-box {
			// height: 650rpx;

			// background-color: #2934d0;

			image {
				// margin-top: 100rpx;
				height: 1300rpx;
				width: 750rpx;
			}

		}

		.detail {
			padding: 0 8rpx;
			// margin-top: 778rpx;
			height: 256rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;

			image {
				height: 256rpx;
				width: 194rpx;
			}
		}

		.img-box {
			padding: 0 30rpx;
			margin-top: 80rpx;
			height: 750rpx;

			image {
				height: 750rpx;
				width: 696rpx;
			}
		}

		.advantage {}

		.delivery {}

		.story {
			position: relative;
			margin: 40rpx;
			height: 442px;
			border-radius: 16px;
			padding: 0;
			background: rgba(255, 209, 1, 1);
			overflow: auto;

			.storyTitle {
				color: rgba(23, 23, 23, 1);
				font-family: YouSheBiaoTiHei;
				font-size: 40rpx;
				margin: 40rpx;

			}

			.contentBox {
				height: 610rpx;
				background: #fff;
				border-radius: 24rpx;
				background: rgba(31, 31, 31, 1);
				color: #fff;
				overflow: hidden;
				padding: 40rpx;
			}

			.bg-img {
				position: absolute;
				top: 0;
				left: 30rpx;

				image {
					height: 740rpx
				}
			}

		}

		.popcontentBox {
			min-height: 498px;
			background: #fff;
			background: rgba(31, 31, 31, 1);
			color: #fff;
			overflow: auto;
			padding: 40rpx;
		}

		.bottom {
			background: #fff;
			padding: 20rpx 40rpx;
		}

		.store-content {
			z-index: 999;
			width: 100%;
			text-align: center;

			.title {
				margin-top: 52rpx;
				height: 144rpx;
				line-height: 144rpx;
				font-size: 36rpx;
				color: #2934D0;
				font-weight: bold;
			}

			.swiper-group {
				// height: 394rpx;
				margin: 80rpx 40rpx;
				border-radius: 25rpx;
				padding-left: 16rpx;
			}
		}

		.btn-box {
			padding: 80rpx 40rpx;
			// margin: 32rpx 30rpx 64rpx;
			// height: 120rpx;
			// width: 696rpx;
			// margin-bottom: calc(64rpx + env(safe-area-inset-bottom));

		}
	}

	/deep/ .swiper {
		height: 700rpx !important;
		background: #FFFFFF;
		border-radius: 32rpx;
		padding-top: 40rpx;

		.uni-swiper-wrapper {
			overflow: inherit;
		}

		uni-swiper-item {
			width: 420rpx !important;
			padding: 20px;

			uni-image {
				margin-right: 20px;
				width: 486rpx;
				height: 354rpx;
				border-radius: 32rpx !important;
			}

			.shops-msg {
				padding: 20rpx 24rpx 38rpx 24rpx;
				border-radius: 32rpx !important;
				display: flex;
				align-items: flex-end;
				justify-content: space-between;
				box-shadow: 0rpx 20rpx 40rpx 0rpx rgba(64, 75, 99, 0.03);

			}
		}


	}

	/deep/ .u-indicator-item-round {
		background-color: rgba(255, 255, 255, 0.8);
	}

	/deep/ .u-indicator-item-round-active {
		background-color: RGBA(94, 162, 255, 1);
	}
</style>